<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.box {
	border: 1px solid black;
	float: left;
	width: 300px;
	min-height: 400px;
	margin: 5px;
}

ul#actions {
	list-style-type: none;
}

#actions li {
	float: left;
	margin-right: 5px;
}

.clear {
	clear: both;
}
</style>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/pure.js"></script>
<script type="text/javascript" src="js/dasding.js"></script>
<script type="text/javascript">
	var eventDirective = {
		'div.event' : {
			'event<-event' : {
				'a.name' : 'event.name',
				'a.name@href+' : 'event.id',
			}
		}
	};

	var userDirective = {
		'div.user' : {
			'event<-user' : {
				'a.name' : 'event.name',
				'a.name@href+' : 'event.id',
			}
		}
	};

	var locationDirective = {
		'div.location' : {
			'event<-location' : {
				'a.name' : 'event.name',
				'a.name@href+' : 'event.id',
			}
		}
	};
	var actionCategoryDirective = {
		'div.category' : {
			'event<-actionCategory' : {
				'a.name' : 'event.name',
				'a.name@href+' : 'event.id',
			}
		}
	};

	var eventCategoryDirective = {
		'div.category' : {
			'event<-eventCategory' : {
				'a.name' : 'event.name',
				'a.name@href+' : 'event.id',
			}
		}
	};
</script>

<script type="text/javascript">
	$(document).ready(
			function() {

				//TODO render funktioniert nicht, wenn da nur ein datensatz drin ist >:(

				getObjectList("/dasding/api/events/find", false,
						function(data) {
							$('#events').render(data, eventDirective)
						});

				getObjectList("/dasding/api/locations/find", false, function(
						data) {
					$('#locations').render(data, locationDirective)
				});

				getObjectList("/dasding/api/users/find", true, function(data) {
					console.log(data);
					$('#users').render(data, userDirective)
				});

				getObjectList("/dasding/api/events/categories/find", true,
						function(data) {
							$('#eventcategories').render(data,
									eventCategoryDirective)
						});

				getObjectList("/dasding/api/actions/categories/find", true,
						function(data) {
							$('#actioncategories').render(data,
									actionCategoryDirective)
						});

			});
</script>

</head>
<body>

	<div>
		<ul id="actions">
			<li><a href="html/addEvent.html">Create Event</a></li>
			<li><a href="html/addUser.html">Invite User</a></li>
			<li><a href="html/addLocation.html">Create Location</a></li>
			<li><a href="html/addEventCategory.html">Create Event
					Category</a></li>
			<li><a href="html/addActionCategory.html">Create Action
					Category</a></li>
		</ul>
	</div>

	<div class="clear"></div>

	<div id="users" class="box">
		<h1>Users</h1>
		<div class="user">
			<a class="name" href="html/showUser.html?id="></a>
		</div>
	</div>
	<div id="events" class="box">
		<h1>Events</h1>
		<div class="event">
			<a class="name" href="html/showEvent.html?id="></a>
		</div>
	</div>

	<div id="locations" class="box">
		<h1>Locations</h1>
		<div class="location">
			<a class="name" href="html/showLocation.html?id="></a>
		</div>
	</div>

	<div id="eventcategories" class="box">
		<h1>Event Categories</h1>
		<div class="category">
			<a class="name" href="html/showEventCategory.html?id="></a>
		</div>
	</div>

	<div id="actioncategories" class="box">
		<h1>Action Categories</h1>
		<div class="category">
			<a class="name" href="html/showActionCategory.html?id="></a>
		</div>
	</div>
</body>
</html>